<!-- 网页空态模板，实例：
  <empty-state v-else :emptyId="3"></empty-state>
  import emptyState from '../../components/common/emptyState'
-->

<template>
  <div class="empty-addr">
    <!-- {{ emptyId }} -->
    <div v-for="item in emptyState" v-if="item.pageId == emptyId">

      <img v-if="item.pageId == 1 || item.pageId == 4 || item.pageId == 5" src="../../images/empty.png" alt="">
      <img v-if="item.pageId == 2" src="../../images/loading.png" alt="">
      <img v-if="item.pageId == 3" src="../../images/network.png" alt="">

      <p>{{ item.pText }}</p>
      <router-link v-if="item.pageId != 2 && item.pageId != 3 && item.pageId != 4" :class="{ 'empty-add-addr': true, 'service-address': item.pageId == 4}" :to="item.routerLinkUrl">{{ item.routerLinkText }}</router-link>

      <div v-if="item.pageId == 3" @click="reload" class="empty-add-addr">重新加载</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['emptyId'],
  data () {
    return {
      emptyIdData: '',
      emptyState: [{
        pageId: '1', // 去回收
        pText: '无数据',
        routerLinkUrl: '/idle-clothes',
        routerLinkText: '去回收'
      }, {
        pageId: '2', // 加载中
        pText: '加载中',
        routerLinkUrl: '',
        routerLinkText: ''
      }, {
        pageId: '3', // 网络错误
        pText: '请检查网络后，再给我一次机会！',
        routerLinkUrl: '',
        routerLinkText: '重新加载'
      }, {
        pageId: '4', // service-address 页面
        pText: '无数据',
        routerLinkUrl: 'address-info',
        routerLinkText: '+ 新增地址'
      }, {
        pageId: '5', // notice 页面
        pText: '无数据',
        routerLinkUrl: '/personal-center',
        routerLinkText: '返回个人中心'
      }]
    }
  },
  mounted () {
    // console.log('emptyId', this.emptyId)
    this.emptyIdData = this.emptyId
  },
  methods: {
    reload () {
      location.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-addr {
  height: 100vh;
  background-color: #fff;

  img {
    display: block;
    width: 123px;
    padding-top: 115px;
    margin: 0 auto;
  }
  p {
    color: #54565b;
    font-size: 13px;
    line-height: 1;
    margin: 30px auto;
    text-align: center;
  }
  .empty-add-addr {
    width: 100px;
    text-align: center;
    display: block;
    padding: 8px 0 6px;
    line-height: 1;
    color: #ffb717;
    margin: 0 auto;
    border: 1px solid #ffb717;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .service-address {
    width: 131.22px;
  }
}
</style>
